<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.flex-box {
  display: flex;
  align-items: center;
  background: white;
  border-bottom: 1px solid #f5f5f5;

  .check-box {
    position: relative;
    left: 10px;
    z-index: 2;
  }
}

.goods-card {
  margin: 0;
  background-color: #fff;
  text-align: left;
  flex: 1;
}

.van-card__content {
  padding-left: 10px;
}

.delete-button {
  height: 100%;
}
</style>
<template class="shopcart">
  <div class="container">
    <!--导航栏-->
    <van-nav-bar @click-left="back">
      <van-icon size="20" name="arrow-left" slot="left" color="rgb(150, 151, 153)"/>
      <p slot="title" style="font-size: 14px">购物车</p>
    </van-nav-bar>
    <van-empty v-show="isEmpty" description="购物车为空！"></van-empty>
    <!--购物车-->
    <van-swipe-cell v-show="!isEmpty" v-for="item in shopcart" :key="item.cartid">
      <div class="flex-box">
        <van-checkbox @click="selectOne(item.flag,item.cartid)" class="check-box" icon-size="18px"
                      v-model="item.flag"></van-checkbox>
        <van-card @click-thumb="showDetail('/shopDetail/'+item.proid)"
                  :price="getPrice(item)"
                  :title="item.proname"
                  :tag="item.stock<=10?'仅剩'+item.stock+'件':''"
                  class="goods-card"
                  :thumb="item.img1">
          <template v-slot:footer>
            <van-stepper data-str="0" v-model="item.num" theme="round" button-size="22"
                         @change="changeCount(item.num,item.cartid)"/>
          </template>
        </van-card>
      </div>
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" @click="removeOne(item.cartid)"/>
      </template>
    </van-swipe-cell>
    <!--提交订单-->
    <van-submit-bar :price="total" button-text="提交订单" @submit="account">
      <van-checkbox v-model="checked" @click="selectAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapMutations } from 'vuex'
import { NavBar, SwipeCell, Card, Empty, SubmitBar, Checkbox, CheckboxGroup, Stepper } from 'vant'
import {
  requestRemoveCart,
  requestShoppingCart,
  requestUpdateCart,
  requestUpdateStateAll,
  requestUpdateStateOne
} from '../../api/cart'

Vue.use(NavBar)
Vue.use(SwipeCell)
Vue.use(Card)
Vue.use(Empty)
Vue.use(SubmitBar)
Vue.use(Checkbox)
Vue.use(CheckboxGroup)
Vue.use(Stepper)

export default {
  name: 'ShopCart',
  data () {
    return {
      isEmpty: false,
      checked: false,
      total: 0,
      shopcart: []
    }
  },
  created () {
    this.loadData()
  },
  methods: {
    ...mapMutations({
      changeActive: 'tabs/doActive'
    }),
    getPrice (value) {
      return Math.floor(value.originprice * value.discount / 10).toFixed(2)
    },
    loadData () {
      requestShoppingCart().then(res => {
        // 10119 - 未登录、200 - 正常获取数据
        if (res.code == 10119) {
          this.changeActive(3)
          this.$notify('请您先登录！')
        } else if (res.data.length === 0) {
          this.isEmpty = true
          this.checked = false
          this.total = 0
        } else {
          this.isEmpty = false
          this.shopcart = res.data
          // 更改选中状态
          this.checked = this.selAllState
          // 计算价格
          // console.log(this.calcPrice)
          this.total = this.calcPrice
        }
      })
    },
    showDetail (path) {
      this.$router.push(path)
    },
    // 移除购物车中一条数据
    removeOne (cartid) {
      // console.log('移除一条数据', cartid)
      requestRemoveCart({ cartid }).then(res => {
        console.warn('cartid=>', res)
        this.loadData()
      })
    },
    // 单个选择框
    selectOne (state, cartid) {
      // console.log(state, cartid)
      requestUpdateStateOne(cartid, state).then(res => {
        console.warn(res)
        this.loadData()
      })
    },
    // 全选框
    selectAll () {
      console.log('全选状态', this.checked)
      requestUpdateStateAll(this.checked).then(() => {
        this.loadData()
      })
    },
    // 变化数量
    changeCount (value, id) {
      // console.log(value, id)
      requestUpdateCart({ cartid: id, num: value }).then(res => {
        console.log(res)
        this.loadData()
      })
    },
    // 结算
    account () {
      // console.log("结算")
      if (!this.calcPrice) {
        this.$toast('请选择商品')
        return
      }
      this.$router.push('/addressList?mode=multi')
    },
    back () {
      this.$router.push('/')
      // this.changeActive(0)
    }
  },
  computed: {
    //全部选中状态
    selAllState () {
      return this.shopcart.every(item => item.flag == true)
    },
    // 计算价格
    calcPrice () {
      return this.shopcart.filter(item => item.flag == true).reduce((sum, value) => {
        return sum + Math.floor(value.originprice * value.discount / 10).toFixed(2) * value.num * 100
      }, 0)
    }
  }
}
</script>
